import React, { Component } from "react"
import { graphql } from "gatsby"

import Article from "../../components/Article"
import Layout from "../../components/Layout"
import SEO from "../../components/seo"
import Search from "../../components/Search"
import s from "./post.module.css"
import NewsInfo from "../../components/NewsInfo"

export default class BlogPost extends Component {
	constructor(props) {
		super(props)
		this.state = {
			searchResult: [],
		}
	}

	setSearch = result => {
		this.setState({ searchResult: result.result })
	}

	render() {
		const {
			data: { mongodbCloudmonitorNews: info, recommenNewsList },
			pageContext,
			location,
		} = this.props
		const isSearchResult = this.state.searchResult.length > 0

		return (
			<Layout location={location} title={123}>
				<div className={s.newsInfo}>
					<div className={s.leftContainer}>
						<Search
							onSearch={this.setSearch}
							showRecommend={true}
							recommenNews={recommenNewsList.nodes}
						/>
					</div>
					{/* <div className={s.rightContainer}>
						{isSearchResult ? (
							<>
								{this.state.searchResult.map(node => (
									<NewsInfo
										key={node.mongodb_id}
										newsInfo={node}
									/>
								))}
							</>
						) : (
							<Article info={info} pageContext={pageContext} />
						)}
					</div> */}
				</div>
			</Layout>
		)
	}
}

export const newsQuery = graphql`
	query($id: String) {
		mongodbCloudmonitorNews(mongodb_id: { eq: $id }) {
			author
			content
			datetime
			mongodb_id
			title
			type
		}
		recommenNewsList: allMongodbCloudmonitorNews(
			filter: { isRecommendDisplay: { eq: true } }
			limit: 3
		) {
			nodes {
				id
				title
				type
				summary
				mongodb_id
				datetime
				content
				author
			}
		}
	}
`
